<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
	<body>
		<head th:fragment="bfadmin-header (pageTitle)">
			<meta charset="utf-8">
			<meta http-equiv="X-UA-Compatible" content="IE=edge">
			<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
			<meta name="description" content="">
			<meta name="author" content="">

			<title th:text="${pageTitle}">Buildfarm Admin</title>

			<link rel="stylesheet" type="text/css" th:href="@{/assets/vendor/fontawesome-free/css/all.css}">
			<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
			<link rel="stylesheet" type="text/css" th:href="@{/assets/css/bfadmin.css}">
			<link rel="stylesheet" type="text/css" th:href="@{/assets/vendor/datatables/dataTables.bootstrap4.css}">
			<link rel="stylesheet" type="text/css" th:href="@{/assets/css/bfadmin-custom.css}">

			<link rel="icon" th:href="@{/assets/img/favicon.ico}">

			<script th:inline="javascript">let securityKey = /*[[${securityKey}]]*/ "";</script>
		</head>

		<div th:fragment="bfadmin-sidebar">
			<!-- Sidebar -->
			<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">

				<!-- Sidebar - Brand -->
				<a class="sidebar-brand d-flex align-items-center justify-content-center" href="/dashboard">
					<div class="sidebar-brand-icon rotate-n-15">
						<i class="fas fa-fire"></i>
					</div>
					<div class="sidebar-brand-text mx-3">BF Admin</div>
				</a>

				<!-- Divider -->
				<hr class="sidebar-divider my-0">

				<li class="nav-item">
					<a class="nav-link" th:href="@{'/dashboard/'}">
						<i class="fas fa-fw fa-tachometer-alt"></i>
						<span>Dashboard</span></a>
				</li>

				<!-- Divider -->
				<hr class="sidebar-divider d-none d-md-block">

				<!-- Sidebar Toggler (Sidebar) -->
				<div class="text-center d-none d-md-inline">
					<button class="rounded-circle border-0" id="sidebarToggle"></button>
				</div>

			</ul>
			<!-- End of Sidebar -->
		</div>

		<div th:fragment="bfadmin-sidebar-empty">
			<!-- Sidebar -->
			<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion toggled" id="accordionSidebar">

				<!-- Sidebar - Brand -->
				<a class="sidebar-brand d-flex align-items-center justify-content-center" href="/dashboard">
					<div class="sidebar-brand-icon rotate-n-15">
						<i class="fas fa-fire"></i>
					</div>
					<div class="sidebar-brand-text mx-3">BF Admin <sup>3.0</sup></div>
				</a>

				<!-- Divider -->
				<hr class="sidebar-divider my-0">

			</ul>
			<!-- End of Sidebar -->
		</div>

		<div th:fragment="bfadmin-nav">
			<!-- Topbar -->
			<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
				<!-- Sidebar Toggle (Topbar) -->
				<button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
					<i class="fa fa-bars"></i>
				</button>
				<!-- Topbar Navbar -->
				<ul class="navbar-nav ml-auto">
					<div class="topbar-divider d-none d-sm-block"></div>
					<!-- Nav Item - User Information -->
					<li class="nav-item dropdown no-arrow">
						<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
							<span class="mr-2 d-none d-lg-inline text-gray-600 small"></span>
							<img class="img-profile rounded-circle" th:src="@{/assets/img/thisisfine.jpg}">
						</a>
						<!-- Dropdown - User Information -->
						<div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">
							<a class="dropdown-item" href="#">
								<i class="fas fa-tag fa-sm fa-fw mr-2 text-gray-400"></i>
								BF Admin Dev
							</a>
							<a class="dropdown-item" href="#">
								<i class="fas fa-tags fa-sm fa-fw mr-2 text-gray-400"></i>
								BF Admin Prod
							</a>
							<div class="dropdown-divider"></div>
							<a class="dropdown-item" href="/settings">
								<i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i>
								Settings
							</a>
							<div class="dropdown-divider"></div>
							<a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
								<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
								Logout
							</a>
						</div>
					</li>
				</ul>
			</nav>
			<!-- End of Topbar -->
		</div>

		<div th:fragment="bfadmin-copyright">
			<!-- Footer -->
			<footer class="sticky-footer bg-white">
				<div class="container my-auto">
					<div class="copyright text-center my-auto">
						<span>Buildfarm Admin</span>
					</div>
				</div>
			</footer>
			<!-- End of Footer -->
		</div>

		<div th:fragment="bfadmin-footer">
			<!-- Scroll to Top Button-->
			<a class="scroll-to-top rounded" href="#page-top">
				<i class="fas fa-angle-up"></i>
			</a>

			<!-- Logout Modal-->
			<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
							<button class="close" type="button" data-dismiss="modal" aria-label="Close">
								<span aria-hidden="true">×</span>
							</button>
						</div>
						<div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
						<div class="modal-footer">
							<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
							<a class="btn btn-primary" href="/logout">Logout</a>
						</div>
					</div>
				</div>
			</div>

			<!-- Confirmation Modal -->
			<div class="modal fade" id="actionSuccess" tabindex="-1" role="dialog">
				<div class="modal-dialog modal-dialog-centered" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<h5 class="modal-title" id="actionSuccessTitle">Request Sent!</h5>
							<button type="button" class="close" data-dismiss="modal"
									aria-label="Close">
								<span aria-hidden="true">&times;</span>
							</button>
						</div>
						<div class="modal-body">Your request submitted successfully.
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
						</div>
					</div>
				</div>
			</div>

			<div class="modal fade" id="actionFailure" tabindex="-1" role="dialog">
				<div class="modal-dialog modal-dialog-centered" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<h5 class="modal-title" id="actionFailureTitle">Error
								Occurred!</h5>
							<button type="button" class="close" data-dismiss="modal"
									aria-label="Close">
								<span aria-hidden="true">&times;</span>
							</button>
						</div>
						<div class="modal-body">
							<div class="ajax-error"></div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
						</div>
					</div>
				</div>
			</div>

			<div class="toastSuccess fade hide" style="position: fixed; top: 10px; right: 10px; border-radius: 10px; border: 1px solid #73AD21; background-color: #FFFFFF; z-index: 10000;">
				<div class="toast-body">
					Your request submitted successfully.
				</div>
			</div>

			<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
			<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
			<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
			<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.compatibility.min.js"></script>
			<script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
			<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
			<script th:src="@{/assets/vendor/datatables/dataTables.bootstrap4.js}"></script>
			<script th:src="@{/assets/js/bfadmin.js}"></script>
			<script th:src="@{/assets/js/datatables.js}"></script>
			<script th:src="@{/assets/js/bfadmin-events.js}"></script>
		</div>
	</body>
</html>
